<template>
  <div>
    <h2>计算属性</h2>
    <input type="text" v-model="num1">
    <input type="text" v-model="num2">
    <h2>我是另外一个响应式{{ num3 }}</h2>
    <h3>两个数相加的和等于 {{ add }}</h3><br>
    <button @click='changnum3'>点我改变num3</button>
  </div>
</template>

<script>
import {computed, reactive,toRefs,watch} from 'vue'
// defineComponent 可以被省略 ， 程序健壮性和兼容性考虑
export default {
    setup() {
        const state = reactive({
            num1:0,
            num2:0,
            num3:'天王盖地虎',
            add: computed(() => {
                return parseInt(state.num1) + parseInt(state.num2)
            })
        })
        // 监听两个文本狂
        watch(state , ()=>{
            console.log('inp发生里改变')
        })
        // 监听单个
        watch(()=>state.num3,()=>{
            console.log('num3改变了')
        })
        // 监听多个
        watch([state.num1 , state.num2],(newVal,oldVal)=>{
            // debugger
        })
        const changnum3 = ()=>{
            state.num3 = '喜洋洋'
        } 
        // 计算属性依赖data里面的数据 直接写在{{}}
        return {
            // ...toRefs方法可以在{{}}中省略state.
        ...toRefs(state),
        changnum3

        }
        
    }

    

   
}
</script>

<style>

</style>